<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- [html] Standards模式和Quirks模式有什么区别 -->
  标准盒模型：元素实际宽度=margin2+border2+padding2+width
怪异盒模型：元素内容宽度=width-margin2-border2-padding2

standards模式和quirks模式主要是以HTML是否加!DOCTYPE
quirks主要是为了兼容各个浏览器，远古时期遗留下来的BUG（或者说是当时的标准，对于现在来说的BUG），它并未遵循W3C的标准

主要的区别在盒模型上：
standards盒模型：width = content
quirks盒模型：width = content + border + padding

可以通过box-sizing: border-box、content-box来切换
</body>
</html>